<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="tool-photo">
    <w-nav-bar
      title="相册"/>
    <group
      gutter="0"
      class="data-time">
      <datetime
        placeholder="请选择数据"
        @on-change="dataTimeChange"
        format="YYYY-MM"/>
    </group>
    <ul
      class="table-view w-flex-between">
      <li
        v-for="(v, k) in loadListModel.dataArr"
        :key="v.name"
        class="image-box w-image-fit"
        @click.self="imageClick(k)"
        v-lazy:background-image="v.mPhotoListUrl || defaultImage">
        <w-remove-btn @click.native="removeClick(v, k)"/>
      </li>
    </ul>
    <w-load-more :load-model="loadListModel"/>
    <w-viewer ref="IMAGE_SHOW"/>
    <w-enum-bnt>
      <add-icon
        fill="#fff"
        @click="addClick"/>
    </w-enum-bnt>
  </div>
</template>

<script>
  import OSSListLoad from '@/models/oss/OSSListLoad'
  import Config from '@/config/index'
  import IconRemove from '@/icons/remove.svg'
  import WViewer from '@/components/global/viewer/index'
  import { Datetime, Group } from 'vux'
  import WLoadMore from '@/components/global/loadMore'
  import WPopView from '@/utils/popView'
  import WEnumBnt from '@/components/mobile/moveMenuBtn'
  import AddIcon from '@/icons/add.svg'
  import WRemoveBtn from '@/components/mobile/removeBtn'
  export default {
    name: 'ToolPhoto',
    components: {
      IconRemove,
      WViewer,
      Datetime,
      Group,
      WLoadMore,
      WEnumBnt,
      AddIcon,
      WRemoveBtn
    },
    data() {
      return {
        // 默认图片
        defaultImage: Config.defaultImage,
        // 列表加载模型
        loadListModel: new OSSListLoad(Config.photoBocket, 'OSS_image'),
      }
    },
    methods: {
      /**
       * 时间改变的时候调用
       */
      dataTimeChange(time) {
        this.loadListModel.prefix = `OSS_image_${time}`
        this.loadListModel.clearData()
        this.loadListModel.loadData().w_then()
      },
      // 添加按钮点击
      addClick() {
        this.$router.push({ name: 'ToolPhotoAdd' })
      },
      // 图片点击
      imageClick(k) {
        const arr = this.loadListModel.dataArr.map((v) => {
          return v.url
        })
        this.$refs['IMAGE_SHOW'].show(arr, k)
      },
      // 删除按钮点击
      async removeClick(v, k) {
        WPopView.confirm('删除提示', '确定要删除图片吗？', {
          imageUrl: v.mPhotoListUrl
        }).w_then(() => {
          v.removeData(Config.photoBocket).w_then(() => {
            this.loadListModel.removeWithIndex(k)
            WPopView.msgSuccess('删除成功')
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .tool-photo {
    >.data-time {
      display: block;
      position: fixed;
      left: 0;
      top: 46px;
      width: 100%;
      z-index: 1000;
    }
    >.table-view {
      list-style: none;
      margin: 0;
      padding: 50px 10px 10px 10px;
      flex-wrap: wrap;
      >.image-box {
        width: 175px;
        height: 175px;
        margin-bottom: 5px;
        position: relative;
        z-index: 0;
      }
    }
  }
</style>
